<template>
  <div class="container" ref="container" style="width: 100vw; height: 100vh">
    <!-- 考试页面的头部菜单 -->
    <el-header class="head" style="height: 75px">
      <div class="nav">
        <!-- 左侧 -->
        <div class="left" style="font-size: 20px; color: #fff;display: flex;width:500px">
          <el-image
              :src="src"
              style="
                width: 65px;
                height: 65px;
              "
            ></el-image>
          考试名称：Java基础
        </div>
        <!-- 中间倒计时 -->
        <el-menu
          router
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="rgb(0, 21, 41)"
          text-color="rgb(166, 173, 180)"
          active-text-color="#fff"
          style="width: 1200px; height: 75px; line-height: 75px"
        >
          <el-menu-item style="height: 75px;line-height: 75px;font-size: 20px;margin-left: 200px;color: #fff;">
              <i class="el-icon-time"></i> 考试剩余时间：
              <span>{{ hour }}：{{ minute }}：{{ second }}</span
            >
          </el-menu-item>
          <el-button
            type="primary"
            plain
            @click.prevent="centerDialogVisible = true"
            style="margin-left: 150px"
            >点击交卷
          </el-button>
          <!-- 点击交卷弹出对话框 -->
            <el-dialog
              title="提示"
              :visible.sync="centerDialogVisible"
              width="30%"
              height="25%"
              center>
              <p style="color:red;font-weight: 700;">*确认试卷填写完毕之后请输入您的姓名和身份证号，点击确定之后就结束答卷*</p>
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="考试姓名" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="identity">
                  <el-input v-model="ruleForm.identity"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="open()">确 定</el-button>
              </span>
            </el-dialog>
        </el-menu>
        <!-- 右侧用户 -->
        <el-col
          :span="12"
          style="display: flex; width: 500px; padding-left: 120px"
        >
          <div class="block" style="padding: 12px">
            <el-avatar :size="50" :src="circleUrl"></el-avatar>
          </div>
          <div class="sub-title">我大招好了</div>
        </el-col>
      </div>
    </el-header>
    <!-- 考试试题 -->
    <div class="content-list">
      <!-- 左侧题目栏 -->
      <div class="cleft">
        <el-row class="tac">
          <el-col :span="12" style="width: 100%; height: 100%">
            <el-menu
              router
              default-active="1"
              class="el-menu-vertical-demo"
              :default-openeds="openeds"
              @open="handleOpen"
              @close="handleClose"
              style="width: 100%; height: 100%"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-edit"></i>
                  <span>单选题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="/radioitem"
                    :route="{ path: '/student/exam/radioitem' }"
                    ><i class="el-icon-view"></i>题目1</el-menu-item
                  >
                  <el-menu-item
                    index="/radioitem"
                    :route="{ path: '/student/exam/radioitem' }"
                    ><i class="el-icon-view"></i>题目2</el-menu-item
                  >
                  <el-menu-item
                    index="/radioitem"
                    :route="{ path: '/student/exam/radioitem' }"
                    ><i class="el-icon-view"></i>题目3</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-edit-outline"></i>
                  <span>多选题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="/checkbox"
                    :route="{ path: '/student/exam/checkbox' }"
                    ><i class="el-icon-view"></i>题目1</el-menu-item
                  >
                  <el-menu-item
                    index="/checkbox"
                    :route="{ path: '/student/exam/checkbox' }"
                    ><i class="el-icon-view"></i>题目2</el-menu-item
                  >
                  <el-menu-item
                    index="/checkbox"
                    :route="{ path: '/student/exam/checkbox' }"
                    ><i class="el-icon-view"></i>题目3</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-document-checked"></i>
                  <span>判断题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="/TFitem"
                    :route="{ path: '/student/exam/TFitem' }"
                    ><i class="el-icon-view"></i>题目1</el-menu-item
                  >
                  <el-menu-item
                    index="/TFitem"
                    :route="{ path: '/student/exam/TFitem' }"
                    ><i class="el-icon-view"></i>题目2</el-menu-item
                  >
                  <el-menu-item
                    index="/TFitem"
                    :route="{ path: '/student/exam/TFitem' }"
                    ><i class="el-icon-view"></i>题目3</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <!-- 右侧答题区 -->
      <div class="cright">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      // 用户头像
      circleUrl: require("../../../assets/user.jpg"),
      // 倒计时
      hours: 1,
      minutes: 30,
      seconds: 0,
      // 公司logo
      src: require("../../../assets/title.png"),
      // 对话框
      centerDialogVisible: false,
      // 默认打开
      openeds: ['1'],
      // 考生姓名身份证号表单
      ruleForm: {
        name: '',
        identity: '',
      },
      rules: {
          name: [
            { required: true, message: '请输入考生姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          identity: [
            { required: true, message: '请输入考生身份证号', trigger: 'blur' },
            { max: 18, message: '长度在 18 个字符', trigger: 'blur' }
          ],
        }
    };
  },
  // created() {
  //   this.$nextTick(() => {
  //     // 禁用右键
  //     document.oncontextmenu = new Function("event.returnValue=false");
  //     // 禁用选择
  //     document.onselectstart = new Function("event.returnValue=false");
  //     //禁止f12
  //     document.οnkeydοwn = new Function("event.returnValue=false");
  //   });
  //   // 上面的禁止f12那段代码没有生效，但是加了下面这段就能生效。
  //   document.onkeydown = function (e) {
  //     if (e && e.keyCode === 123) {
  //       e.returnValue = false;
  //       // e.keyCode = 0   //去掉也可以的，倘若要写，则需要setter 以及 getter配合使用，不配合，会报错
  //       return false;
  //     }
  //   };
  // },
  mounted() {
    this.add();
    window.addEventListener("resize", this.judgeCurrentScreen);
  },
  destroyed() {
    window.removeEventListener("resize", this.judgeCurrentScreen);
  },
  methods: {
    // 防止数值小于10时，出现一位数
    num(n) {
      return n < 10 ? "0" + n : "" + n;
    },
    // 倒计时函数
    add() {
      var time = window.setInterval(() => {
        if (this.hours !== 0 && this.minutes === 0 && this.seconds === 0) {
          this.hours -= 1;
          this.minutes = 59;
          this.seconds = 59;
        } else if (
          this.hours === 0 &&
          this.minutes !== 0 &&
          this.seconds === 0
        ) {
          this.minutes -= 1;
          this.seconds = 59;
        } else if (
          this.hours === 0 &&
          this.minutes === 0 &&
          this.seconds === 0
        ) {
          this.seconds = 0;
          window.clearInterval(time);
        } else if (
          this.hours !== 0 &&
          this.minutes !== 0 &&
          this.seconds === 0
        ) {
          this.minutes -= 1;
          this.seconds = 59;
        } else {
          this.seconds -= 1;
        }
      }, 1000);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect() {},

    // 点击交卷功能
    open() {
      this.$confirm("交卷之后就不能继续作答，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "交卷成功!",
          });
          this.$router.push("/student/testlist");
          this.btnClick();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消交卷",
          });
        });
    },

    // 全屏功能
    btnClick() {
      var element = document.getElementById("container");
      if (this.isFullscreen()) {
        // 全屏
        this.exitFullScreen();
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen(); // IE11
        }
      }
    },
    // 退出全屏
    exitFullScreen() {
      let exitFullScreen =
        document.exitFullScreen ||
        document.mozCancelFullScreen ||
        document.webkitExitFullscreen ||
        document.msExitFullscreen;
      if (exitFullScreen) {
        exitFullScreen.call(document);
      }
    },
    // 判断是否全屏
    isFullscreen() {
      return (
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        false
      );
    },
  },
  watch: {
    // 监听数值变化
    second: {
      handler(newVal) {
        this.num(newVal);
      },
    },
    minute: {
      handler(newVal) {
        this.num(newVal);
      },
    },
    hour: {
      handler(newVal) {
        this.num(newVal);
      },
    },
  },
  computed: {
    // 初始化数据
    second() {
      return this.num(this.seconds);
    },
    minute() {
      return this.num(this.minutes);
    },
    hour() {
      return this.num(this.hours);
    },
  },
};
</script>
  <style scoped lang="less">
  .container {
  width: 100%;
  height: 1000px;
  background-color: #f0f2f5;
  .nav {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    .left {
      width: 300px;
    }
  }
}

.content-list {
  width: 100%;
  height: 92%;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  .cleft {
    width: 15%;
    height: 98%;
    background-color: #fff;
  }
  .cright {
    width: 80%;
    height: 95%;
    background-color: #fff;
    margin: 30px;
    padding: 10px;
    padding-left: 30px;
    box-sizing: border-box;
  }
}
.el-header {
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(0, 21, 41);
  color: rgb(166, 173, 180);
  text-align: center;
  line-height: 75px;
  display: fixed;
  top: 0;
  left: 0;
}
.el-dialog{
  font-size: 14px;
  input{
    height: 25px;
  }
}
</style>